<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <!-- meta使用viewport以确保页面可自由缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 引入 jQuery Mobile 样式 -->
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">

    <!-- 引入 jQuery 库 -->
    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- 引入 jQuery Mobile 库 -->
    <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <style type="text/css">
        th {
            border-bottom: 1px solid #d6d6d6;
        }

        tr:nth-child(even) {
            background: #e9e9e9;
        }

        #btn-search{
            position: fixed;
            top: 16%;
            right: 2%;
            z-index: 2;
        }

        #btn-add{
            position: fixed;
            top: 22%;
            right: 2%;
            z-index: 2;
        }

        #pagebox{
            text-align: center;
        }

    </style>

    <meta charset="UTF-8">
    <meta charset="gbk"/>
    <title>Login</title>
</head>
<body>
<div data-role="page" id="Homepage">

    <!-- 面板 -->
    <div data-role="panel" id="myPanel">
        <a href="#" class="ui-btn ui-icon-home ui-btn-icon-left">主页</a>
        <a href="#" class="ui-btn ui-icon-lock ui-btn-icon-left">查看课表</a>
        <a href="#" class="ui-btn ui-icon-info ui-btn-icon-left">发布论题</a>
        <a href="#" class="ui-btn ui-icon-info ui-btn-icon-left">查看论题</a>
        <a href="#" class="ui-btn ui-icon-info ui-btn-icon-left">毕设成绩评定</a>
        <a href="#" class="ui-btn ui-icon-info ui-btn-icon-left">学生成绩导入</a>
    </div>

    <!-- 头部 -->
    <div data-role="header">
        <a href="#myPanel" class="ui-btn ui-shadow ui-corner-all ui-icon-bullets ui-btn-icon-notext">更多</a>
        <h1>教务管理系统</h1>
    </div>

    <div data-role="main" class="ui-content">
        <div style="border:1px solid #a5b6c8;background:#eef3f7">
            <form  role="form" action="/logout" method="post">
                <p1>欢迎您,XXX</p1>
                <button type="submit">注销</button>
            </form>
        </div>

        <div id="studentInform" style=" border-style: ridge;">
            <table data-role="table" class="ui-responsive">
                <thead>
                <tr>
                    <th v-model="name">姓名</th>
                    <th v-model="college">学院</th>
                    <th v-model="major">专业</th>
                    <th v-model="class">班级</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>张三</td>
                    <td>信息学院</td>
                    <td>计算机</td>
                    <td>1601</td>
                </tr>
                </tbody>
            </table>
        </div>
        <br>
        <br>
        <div id="news" style="border-style: ridge">
            <p1>通知</p1>
            <br>
            <a href="#">2019年四六级网上报名通知</a>
        </div>
        <br>
        <div id="newClass" style="border-style: ridge">
            <p1>课表</p1>
            <br>
            <a href="#">软件工程 A阶202</a>
        </div>
        <br>
        <div id="newGrade" style="border-style: ridge">
            <p1>成绩</p1>
            <br>
            <a href="#">Java程序设计</a>
        </div>
    </div>

    <!-- 底部 -->
    <div data-role="footer" data-position="fixed">
        <h1>版权所有</h1>
    </div>

</div>

</body>
</html>